<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%--
  Description: 
  User: wangguichun
  Date: 2018/4/14
  Time: 21:10
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>问题</title>

    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/base.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/nav.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mask.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/questionDetail.css">
</head>
<body>
<jsp:include page="../common/nav.jsp"/>
<div class="main" id="${pageContext.request.contextPath}">
    <div class="content">
        <div class="question-info">
            <div class="question-tag">
                <a href="${pageContext.request.contextPath}/ques/list/${question.topicId}/1">${question.topic.name}</a>
            </div>
            <div class="question-title">
                <a href="${pageContext.request.contextPath}/ques/${question.id}">${question.title}</a>
            </div>
            <div class="question-content">
                ${question.content}
            </div>
            <div class="question-meta">
                <a href="#" class="question-reply">
                    <i class="sprite-question-reply"></i>
                    ${fn:length(question.qCommentList)} 条评论
                </a>
                <a href="javascript:accuse('0','${question.id}');">举报</a>
                <!-- <a href="#" class="question-share"><i class="sprite-question-share"></i>分享</a> -->
                <!-- <a href="#"><span> • </span>邀请回答</a> -->
            </div>
            <div class="comment">
                <ul>
                    <c:forEach items="${question.qCommentList}" var="comment">
                        <li class="comment-li">
                            <img src="${comment.user.avatarUrl}">
                            <div class="comment-main">
                                <div class="user-name">
                                    <a href="javascript:showUserMask(${comment.userId});">${comment.user.name}</a>
                                </div>
                                <div class="comment-content">${comment.content}</div>
                                <div class="comment-meta">
                                    <span class="timeNeedConvert">${comment.time}</span>
                                    <a href="javascript:accuse('1','${comment.id}');">举报</a>
                                </div>
                            </div>
                        </li>
                    </c:forEach>
                </ul>
                <div class="add-comment">
                    <textarea id="commentQuestionArea"></textarea>
                    <button onclick="commentQuestion();">评论</button>
                </div>
            </div>
            <div class="answer-count">
                <div class="count">${fn:length(answerList)} 个回答</div>
            </div>
        </div>
        <div class="answer-list">
            <c:forEach items="${answerList}" var="answer">
                <div class="answer-item" id="answer-${answer.id}">
                    <div class="user-info">
                        <a href="javascript:showUserMask(${answer.userId});">${answer.user.name}</a>
                        <span class="comma">，</span>
                        <span>${answer.user.simDesc}</span>
                        <img src="${answer.user.avatarUrl}">
                    </div>
                    <div class="answer-content">
                            ${answer.content}
                    </div>
                    <div class="answer-meta">
                        <a href="#">&nbsp;发布于 <span class="timeNeedConvert">${answer.time}</span></a>
                        <a href="#"><span class="glyphicon glyphicon-leaf"></span>${fn:length(answer.aCommentList)} 条评论</a>
                        <a href="javascript:accuse('2','${answer.id}');">举报</a>
                    </div>

                    <div class="comment">
                        <ul>
                            <c:forEach items="${answer.aCommentList}" var="comment">
                                <li class="comment-li">
                                    <img src="${comment.user.avatarUrl}">
                                    <div class="comment-main">
                                        <div class="user-name">
                                            <a href="#">${comment.user.name}</a>
                                        </div>
                                        <div class="comment-content">${comment.content}</div>
                                        <div class="comment-meta">
                                            <span class="timeNeedConvert">${comment.time}</span>
                                            <a href="javascript:accuse('3','${comment.id}');">举报</a>
                                        </div>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>

                        <div class="add-comment">
                            <input type="hidden" value="${answer.id}">
                            <textarea></textarea>
                            <button onclick="commentAnswer(this);">评论</button>
                        </div>
                    </div>
                </div>
            </c:forEach>

        </div>

        <div class="edit-area">
            <div class="add-comment">
                <textarea id="answerContent" style="height: 200px;"></textarea>
                <div class="publish-answer">
                    <button onclick="publishAnswer();">发布回答</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-top">
            <%--已收藏--%>
            <c:if test="${staredStatus}">
                <button id="unStarButton" class="unfollow">取消收藏</button>
                <button id="starButton" disabled class="follow" style="opacity: 0.6">已收藏</button>
            </c:if>
            <%--未收藏--%>
            <c:if test="${!staredStatus}">
                <button id="unStarButton" disabled class="unfollow" style="opacity: 0.6">取消收藏</button>
                <button id="starButton" class="follow">收藏问题</button>
            </c:if>
            <div class="follower-info">
                <a href="#" class="follower-count">${fn:length(staredUsers)}</a> 人收藏了该问题
                <div class="follower-avatar">
                    <ul>
                        <c:forEach items="${staredUsers}" var="user">
                            <li>
                                <a href="javascript:showUserMask(${user.id});">
                                    <img src="${user.avatarUrl}">
                                </a>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
        </div>

        <div class="question-status">
            <h3>问题状态</h3>
            <div class="user-info">
                <a href="javascript:showUserMask(${question.userId});">${question.user.name}</a>
                <span class="comma">，</span>
                <span>${question.user.simDesc}</span>
                <img src="${question.user.avatarUrl}">
            </div>
            <%--已收藏--%>
            <c:if test="${followedStatus}">
                <button id="unFollowButton" class="unfollow">取消关注</button>
                <button id="followButton" disabled class="follow" style="opacity: 0.6">已关注</button>
            </c:if>
            <%--未收藏--%>
            <c:if test="${!followedStatus}">
                <button id="unFollowButton" disabled class="unfollow" style="opacity: 0.6">取消关注</button>
                <button id="followButton" class="follow">关注作者</button>
            </c:if>
            <div>问题创建于<span class="timeNeedConvert"> ${question.time} </span></div>
        </div>
        <%--右侧栏--%>
        <jsp:include page="../common/footer.jsp"/>
    </div>
</div>

<jsp:include page="../common/mask.jsp"/>

</body>

<script src="${pageContext.request.contextPath}/js/MyConverter.js"></script>
<script>

    $(function () {
        //收藏与取消收藏按钮处理
        var unStarButton = $("#unStarButton");
        var starButton = $("#starButton");
        starButton.click(function () {
            $.ajax("${pageContext.request.contextPath}/star/add", {
                data: {
                    "userId": $.cookie("id"),
                    "questionId":${question.id},
                    "time": new Date().getTime(),
                    "questionUserId":${question.userId}
                },
                success: function () {
                    window.location.reload();
                }

            });
        });
        unStarButton.click(function () {
            $.ajax("${pageContext.request.contextPath}/star/remove", {
                data: {
                    userId: $.cookie("id"),
                    questionId:${question.id},
                    time: new Date().getTime()
                },
                success: function () {
                    window.location.reload();
                }

            });
        });
        //关注与取消关注
        var unFollowButton = $("#unFollowButton");
        var followButton = $("#followButton");
        followButton.click(function () {
            $.ajax("${pageContext.request.contextPath}/follow/add", {
                data: {
                    "fromId": $.cookie("id"),
                    "toId":${question.userId},
                    "time": new Date().getTime(),
                },
                success: function () {
                    window.location.reload();
                }

            });
        });
        unFollowButton.click(function () {
            $.ajax("${pageContext.request.contextPath}/follow/remove", {
                data: {
                    "fromId": $.cookie("id"),
                    "toId":${question.userId},
                    "time": new Date().getTime(),
                },
                success: function () {
                    window.location.reload();
                }

            });
        });
    });

    //对问题进行评论
    function commentQuestion() {
        var questionId = ${question.id};
        var content = $("#commentQuestionArea").val();
        var userId = $.cookie("id");
        var time = new Date().getTime();
        if (content === "") {
            alert("请先填写你的评论内容");
            return;
        }
        $.ajax("${pageContext.request.contextPath}/comment/question", {
            data: {
                questionId: questionId,
                content: content,
                userId: userId,
                time: time,
                questionUserId:${question.userId}
            },
            success: function () {
                alert("评论成功");
                window.location.reload();
            }
        })
    }

    //对答案进行评论
    function commentAnswer(e) {
        var form = $(e).parent();
        var answerId = form.find("input").val();
        var content = form.find("textarea").val();
        var userId = $.cookie("id");
        var time = new Date().getTime();
        if (content === "") {
            alert("请先填写你的评论内容");
            return;
        }
        $.ajax("${pageContext.request.contextPath}/comment/answer", {
            data: {
                answerId: answerId,
                content: content,
                userId: userId,
                time: time,
                questionId:${question.id}
            },
            success: function () {
                alert("评论成功");
                window.location.reload();
            }
        })
    }

    //发布答案
    function publishAnswer() {
        var questionId = ${question.id};
        var content = $("#answerContent").val();
        var userId = $.cookie("id");
        var time = new Date().getTime();
        if (content === "") {
            alert("请先填写你的答案");
            return;
        }
        $.ajax("${pageContext.request.contextPath}/answer/add", {
            data: {
                questionId: questionId,
                content: content,
                userId: userId,
                time: time,
                questionUserId:${question.userId}
            },
            success: function () {
                alert("感谢你的热心解答 ^_^");
                window.location.reload();
            }
        })
    }

    //举报功能
    function accuse(type, objectId) {
        // type : 0-提问 1-提问的评论 2-回答 3-回答的评论
        var reason = prompt("输入令你不适的原因，我们后台会对该发言进行审核。");
        if (reason === null){
            return;
        }else if (reason === ""){
            alert("请输入原因。");
        } else {
            $.ajax("${pageContext.request.contextPath}/user/accuse",{
                data:{
                    fromId:$.cookie("id"),
                    type:type,
                    objectId:objectId,
                    reason:reason,
                    time:new Date().getTime()
                },
                success:function () {
                    alert("感谢你的反馈。");
                }
            })
        }

    }
    
    
</script>
</html>








